<template>
  <div>
    <!-- banner -->
    <div class="link-banner banner">
      <h1 class="banner-title">相册</h1>
    </div>


    <!-- 相册内容 -->
    <v-card class="blog-container">
      <div>
        <el-button type="primary" style="border-radius: 20px" @click="openDialog">新建相册</el-button>
      </div>
      <v-row>
        <v-col :md="6" v-for="item of photoAlbumList" :key="item.id">
          <div class="album-item"  >
            <v-img class="album-cover" :src="item.albums" />

            <a class="album-wrapper"  @mouseover="mouseOver(item.id)" @mouseleave="mouseLeave()">

              <div class="album-desc"><a  @click="delete1(item.id)" style="color: white;"><i class="el-icon-delete" v-show="shows" style="float: right" ></i></a></div>
              <div class="album-name"><a @click="open(item.category)" style="color: white">{{ item.category }}</a></div>
              <div class="album-desc"><a @click="open(item.category)" style="color: white">{{ item.intro }}</a></div>
            </a>
          </div>
        </v-col>
      </v-row>
    </v-card>

    <el-dialog class="diag1"
               title="新建相册"
               :visible.sync="dialogVis"

    >
      <el-form :model="forms">
        <el-form-item label="相册名称">
          <el-input v-model="forms.category" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="相册介绍">
          <el-input v-model="forms.intro" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="链接">
          <el-input v-model="forms.albums" @blur="aaa" style="width: 80%" :disabled="flages"></el-input>
        </el-form-item>
        <el-form-item label="封面">
          <el-upload :disabled="flags"
                  ref="upload"
                  action="http://127.0.0.1:8081/files/upload"
                  :on-success="filesUploadSuccess1"
          >
            <el-button size="small" :disabled="flags" type="primary">点击上传</el-button>

          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="addAlbum">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
    import request from '../../utils/request'

    export default {
        created() {
            let str = sessionStorage.getItem("user")
            this.form = JSON.parse(str)
            if (!str) {
                return
            }
            this.listPhotoAlbums();
        },
        data: function () {
            return {
                shows: false,
                forms: {category: '', intro: ''},
                dialogVis: false,
                form: {},
                photoAlbumList: [],
                flags:false
            };
        },

        methods: {
            //取消
            cancel(){
                this.dialogVis = false
                this.forms={}
            },
            //监听事件
            aaa(){
                if (this.forms.albums!=''){
                    this.flags = true
                }else{
                    this.flages=true
                }

            },
            //删除
            delete1(id){
                console.log(id)
                this.$confirm('你确定要删除相册,是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.delete('/album/deleteAblum/album/'+id).then(res=>{
                        if (res.code===20000){
                            this.$toast({
                                type:'success',
                                message:'删除成功'
                            })
                            // this.$router.go(0);
                            this.listPhotoAlbums();
                        }else {
                            this.$toast({
                                type:'error',
                                message:res.msg
                            })
                        }
                    })
                }).catch(() => {
                    this.$toast({ type: 'success', message: '已取消删除' })
                })



            },
            mouseLeave(){

                this.shows=false
            },

            mouseOver(id){
                console.log(id)
                this.shows=true
            },
            //      打开弹窗
            openDialog() {
                this.dialogVis = true
            },
            //      新建相册
            addAlbum() {
                if (this.forms.category === '') {
                    this.$toast(
                        {
                            type: 'warnning',
                            message: '请输入类别'
                        }
                    )
                    return
                }
                if (this.forms.intro === '') {
                    this.$toast(
                        {
                            type: 'warnning',
                            message: '请输入介绍'
                        }
                    )
                    return
                }

                this.forms.name = this.form.username
                // 区分上传页面： 属于新增相册 0 表示新增相册
                this.forms.op = 0
                request.post('/album/addAblum', this.forms).then(res => {
                    if (res.code === 20000) {
                        this.$toast({
                            type: 'success',
                            message: "添加成功"
                        })
                        // this.$router.go(0)
                        this.listPhotoAlbums();
                        this.dialogVis = false
                    } else {
                        this.$toast({
                            type: 'error',
                            message: res.msg
                        })
                    }
                    console.log(res)
                })
            },

            listPhotoAlbums() {
                request.get('/album/categoryLists/'+this.form.username).then(res => {
                    console.log(res)
                    this.photoAlbumList = res.data;
                });

            },
            //文件上传  更新文件
            filesUploadSuccess1(res) {
                console.log(res.data)
                this.forms.albums = res.data
            },
            open(category) {

                this.$router.push({
                    path: '/phone/',
                    query: {id: category}
                })
            }

        },

    };
</script>

<style scoped>
  .link-banner {
    background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpicture.ik123.com%2Fuploads%2Fallimg%2F200220%2F12-200220110147.jpg&refer=http%3A%2F%2Fpicture.ik123.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646123074&t=18d117a4e761b50aa2421974d4112cc1) center center /
    cover no-repeat;
    background-color: #49b1f5;
  }

  .album-item {
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background: #000;
    border-radius: 0.5rem !important;
  }

  .album-cover {
    position: relative;
    max-width: none;
    width: calc(100% + 1.25rem);
    height: 250px;
    opacity: 0.8;
    transition: opacity 0.35s, transform 0.35s;
    transform: translate3d(-10px, 0, 0);
    object-fit: cover;
  }

  .album-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.8rem 2rem;
    color: #fff !important;
  }

  .album-item:hover .album-cover {
    transform: translate3d(0, 0, 0);
    opacity: 0.4;
  }

  .album-item:hover .album-name:after {
    transform: translate3d(0, 0, 0);
  }

  .album-item:hover .album-desc {
    opacity: 1;
    filter: none;
    transform: translate3d(0, 0, 0);
  }

  .album-name {
    font-weight: bold;
    font-size: 1.25rem;
    overflow: hidden;
    padding: 0.7rem 0;
    position: relative;
  }

  .album-name:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    content: "";
    transition: transform 0.35s;
    transform: translate3d(-101%, 0, 0);
  }

  .album-desc {
    margin: 0;
    padding: 0.4rem 0 0;
    line-height: 1.5;
    opacity: 0;
    transition: opacity 0.35s, transform 0.35s;
    transform: translate3d(100%, 0, 0);
  }

  diag1 {
    width: 30%
  }

  @media (min-width: 760px) {

    el-form {
      width: 100%;
    }

    el-dialog {
      width: 100%;
    }

    .foems1 {
      width: 100%;
    }
  }

</style>
